Диаграммы ECharts

ECharts - библиотеки для создания визуализаций, имеют открытый исходный код.
Данная статья посвящена интеграции SiglaVision и ECharts, а также тому, как создавать данный тип диаграмм.
Информацию о построении графиков ECharts и особенностях работы с данным инструментом доступна по этой ссылке, а также в свободных источниках.

! Ограничения: ECharts не позволяет использовать фильтрацию "от" визуализации ECharts (при клике на ECharts не будет происходить фильтрации остальных компонентов дашборда). Все остальные фильтры, применяемые "к" ECharts - работают.

Создание диаграмм

Для создания графиков ECharts потребуется подготовить новую Рабочую книгу, а затем выполнить следующие шаги:

1. Выбрать тип графика ECharts.

2. Добавить в разделе "Свойства диаграммы" поля, которые будут использоваться.
По умолчанию, это круговая диаграмма, рекомендуется использовать 1 измерение и 1 меру.
После этого, простая круговая диаграмма построится автоматически.
При этом, слева будет находиться код графика на JavaScript, а справа - сама диаграмма.

3. При необходимости, можно дополнительно настроить график.
Для этого нужно дополнительно отредактировать код в левой части области предпросмотра. Существует два раздела: Операторы конфигураций и Операторы данных. Так, в разделе Операторы конфигураций можно настроить внешний вид диаграммы, а Операторы выполняют предварительную обработку данных.

4. Для предпросмотра изменений необходимо нажать кнопку Выполнить, а для того, чтобы изменения вступили в силу - кнопку Сохранить.

5. Настройки диаграммы можно сохранить и переиспользовать в других компонентах.
Для этого необходимо выбрать кнопку Сохранить шаблон как, а после этого - заполнить все поля. При необходимости можно опубликовать этот шаблон - тогда он будет доступен для других разработчиков.

6. Чтобы воспользоваться готовым шаблоном, необходимо выбрать кнопку Ссылка на шаблон, а затем выбрать нужный из списка.

Редактирование кода

Код разделен на две части: подготовка данных. Приведение полей к единой таблицы.
Например:

function dataCal(originData) {
var dataModels = originData.dataModels;
var colData = dataModels[0].colData;
var data = [];
for (var i = 0; i < colData[0].length; i++) {
data[i] = {
Month: colData[0][i], // Month
Fact: colData[1][i], // Fact
Plan: colData[2][i]
};
}
return data;
}

Преобразует 3 поля в единую "таблицу" формата колонка 1 соотв. 1ому полю, колонка 2 второму полю и тд.

Далее представлен основной код создания визуализации, подобный код может помочь сформировать LLM (Большая Языковая Модель). Это можно делать постепенно, добавляя по одному улучшению за 1 запрос к LLM. И в итоге мы получим визуализацию, аналогичную на скриншоте выше.

function optionCal(data, chartConfig, chart) {
const months = data.map(item => item.Month);
const plan = data.map(item => item.Plan);
const fact = data.map(item => item.Fact);
const percent = data.map((item) =>
item.Plan === 0 ? '–' : Math.round((item.Fact / item.Plan) * 100) + '%'
);

return {
grid: {
top: 80,
bottom: 40
},
xAxis: {
type: "category",
data: months,
axisLabel: { color: "black",fontSize: 14 }
},
yAxis: {
axisLabel: {
show: false // отключает подписи значений на оси Y
},
splitLine: {
show: false // отключает горизонтальные линии
}},
series: [
{
name: "План (контур)", //План
type: "bar",
data: plan,
barGap: "-100%",
itemStyle: {
color: "transparent",
borderColor: "#000", // Чёрный контур
borderWidth: 1 //толщина контура
},
z: 3, // Перекроет закраску Факта
label: {
show: true,
position: "insideBottom", color: "black",fontSize: 14,
fontWeight: "bold",}
},
{
name: "Факт",
type: "bar",
data: fact,
itemStyle: {
color: function (params) {
return params.dataIndex < 2 ? "#f57c00" : "#6C8AF6";
}
},
z: 1, // Под планом
label: {
show: true,
position: "top", color: "black",fontSize: 14,
fontWeight: "bold"}
},
{//Вывод ПвП
name: "Процент выполнения",
type: "custom",
renderItem: function (params, api) {
const x = api.coord([api.value(0), 0])[0];
const y = 0.01*api.coord([0, api.value(2)])[1] + 30;
return {
type: "text",
style: {
text: percent[api.value(0)],// ПвП %
x: x,
y: y,
textAlign: "center",
textVerticalAlign: "bottom",
font: "bold 12px sans-serif",
fill: api.value(3)
}
};
},
encode: { x: 0 },
data: months.map((m, i) => [
m,
percent[i],
Math.max(plan[i], fact[i]), // максимальная высота — чтобы быть над столбцом
i < 2 ? "#f57c00" : "#6C8AF6" // цвет
]),
z: 10
}
]
};
}

Еще один пример возможной визуализации, выведена активная легенда.